/* eslint-disable */
<style lang='scss'>
td,
th {
  position: relative;
}
#home {
  .el-card {
    // margin-bottom: 10px;
  }
  .el-badge__content{
    height:20px;
    line-height: 20px;
  }
  .el-table--border th,
  .el-table--border td,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border: 1px solid #409eff;
  }
  .title {
    color: #409eff;
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
  td {
    padding: 0;
    vertical-align: top;
  }
  .class-cell {
    // color:#409eff;
    padding:10px;
    font-weight: bold;
  }
  .date-cel {
    // background: red;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #409eff;
    // padding:10px 9
  }
  .c-title {
    text-align: center;
  }
  .c-teacher {
    color: #67c23a;
    // position: absolute;
    // right:5px;
    // bottom:5px;
    // border-top:1px solid #409eff;
  }
  .holiday-cel {
    background: #ec5f3c;
    color: white;
    text-align: center;
    min-height: 50px;
    padding-top: 10px;
    // width:100%;
    // vertical-align: middle;
    // display: table-cell;
    // line-height: 100%;
  }
  .rest-cel {
    text-align: center;
    // line-height: 30px;
    padding: 10px;

    // color:#eee;
  }
  .week-title {
    th {
      background: #409eff;
      color: white;
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>

<template>
  <div id="home" class="home">
 <el-radio-group @change="handleChangeCourse" v-model="selectIndex">
      <el-radio-button v-for="(c,i) in courses" :label="i">{{c.title}}</el-radio-button>
    </el-radio-group>

    <h1>{{courses[selectIndex].title}}</h1>
    <h5 v-if="courses[selectIndex].startDate">{{courses[selectIndex].startDate}}开课</h5>

    <!-- <el-table
      :data="courses"
      border
      >
      <el-table-column
        prop="title"
        label="课程"
        >
      </el-table-column>
      <el-table-column
        prop="startDate"
        label="开课日期"
        >
      </el-table-column>

    </el-table>-->
    <div
      class="el-table el-table--border el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
    >
      <table  cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;">
        <tbody v-for="month in selectedCourse" >
          <tr>
            <td colspan="7" class="title">
              {{month|getMonth}}月份
              <!-- <button @click="outputExcel(month)">导出excel</button> -->
              </td>
        
          </tr>
          <tr class="week-title">
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
            <th>周日</th>
          </tr>

          <tr v-for="week in month" class="el-table__row">
            <!-- <td><span v-for="n in 10">{{ n }}  {{week[0].dow}}</span></td> -->
            <template v-if="week.length">
              <td v-for="n in week[0].dow-1"></td>
            </template>

            <!-- <td v-for="n in week[0].dow" v-if="week.length">{{}}</td> -->
            <!-- template -->
            <td v-for="(day, dayinweek) in week">
              <div class="date-cel">{{day.date}}({{dayinweek+1}})</div>
              <div v-if="day.type=='rest'" class="rest-cel">休息</div>
              <div v-if="day.type=='class'" class="class-cell">
              <el-card v-for="cardData in day.data" shadow="always" class="box-card">
                <div slot="header" class="clearfix">
                  <span>
                    <el-badge :value="cardData.courseGroup" :type="coursecolor[cardData.courseGroup]" >
                    </el-badge>
                     {{cardData.title}}
                     </span>
                  <el-badge :type="teachercolor[cardData.teacher]" style="float: right" :value="cardData.teacher"></el-badge>
                </div>
                <div  v-for="c in cardData.content.split('\n').filter(v=>v.trim())" :key="c" class="text item">
                    <span v-once>

                  {{c}}

                    </span>
                </div>
                <!-- <div>
                  {{cardData}}
                </div> -->

              </el-card>

              </div>
              <div v-if="day.type=='holiday'" class="holiday-cel">放假</div>
              <!-- {{day}} -->
            </td>
            <!-- <template v-if="week.length"> -->
            <template v-if="week[week.length-1] && week.length<7">
              <td v-for="n in (7-week[week.length-1].dow)"></td>
            </template>

            <!-- </template> -->
          </tr>
          <tr v-if="selectIndex==0">
            <td colspan="2" class="title">
课时统计(不含公开课)
            </td>
            <td colspan="5" class="title">
              <!-- <p v-for=></p> -->
              {{getHourCount(month)}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- <div v-for="month in selectedCourse">

      <div v-for='week in month'>
        <span v-for='day in week'>{{day.date}}</span>
      </div>
      <hr>

  </div>
  <table border="1">

    </table>-->
  </div>
</template>

<script>
/* eslint-disable */

// import {}
// @ is an alias to /src

import dayjs from 'dayjs'
import _ from 'lodash'
import XLSX from 'xlsx'

export default {
  name: 'home',
  props: ['courses', 'openclass', 'teachercolor', 'coursecolor'],
  data () {
    return {
      // 补班
      hourCount: {},
      selectedCourse: [],
      selectIndex: 0
    }
  },
  filters: {
    getMonth (month) {
      for (let i = 0; i < month.length; i++) {
        const week = month[i]
        for (let j = 0; j < week.length; j++) {
          const day = week[j]
          if (day.type) {
            return Number(day.date.split('-')[1])
          }
        }
      }
    }
  },
  methods: {
    outputExcel(month,fn){
      console.log(month)

      	var elt = document.getElementById('month-table-'+month);
	var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
	return false ?
		XLSX.write(wb, {bookType:"xlsx", bookSST:true, type: 'base64'}) :
		XLSX.writeFile(wb, (month+1) + '月排班.xlsx');
    },
    getHourCount (month) {
      const key = month[1][0].date.slice(0, 7)
      return this.hourCount[key]
    },
    handleChangeCourse (i) {
      this.selectCourseByIndex(i)
      // console.log('xxx',e)
    },
    generateCourse (courseData) {
      let courseIndex = 0
      let date
      // 结果
      let ret = this.fixMonthPrefix(courseData.startDate)
      while (courseIndex < courseData.data.details.length) {
        // 假期
        // while(courseIndex<10){
        if (!date) {
          date = dayjs(courseData.startDate)
          ret.push({
            type: 'class',
            date: date.format('YYYY-MM-DD'),
            data: [courseData.data.details[courseIndex]]
          })
          courseIndex += 1
        } else {
          date = date.add('1', 'day')
          const dayOfWeek = Number(date.format('d'))
          const dataStr = date.format('YYYY-MM-DD')
          if (this.holidays.indexOf(dataStr) > -1) {
            ret.push({
              type: 'holiday',
              date: dataStr
            })
            continue
          }

          if (courseData.data.date.indexOf(dayOfWeek) > -1) {
            // 是二四六
            ret.push({
              type: 'class',
              date: dataStr,
              data: [courseData.data.details[courseIndex]]
            })
            courseIndex += 1
          } else {
            ret.push({
              type: 'rest',
              date: date.format('YYYY-MM-DD')
            })
          }
        }
        // console.log(dayjs(courseData.startDate).add('1','day').format('YYYY-MM-DD') )
      }
      return this.generateWeek(ret)
    },
    selectCourseByIndex (index) {
      // const index = 0;
      if (index == 0) {
        // 全部
        const [all, ...courses] = this.courses
        // let ret = {}
        let ret = []
        courses.forEach(c => {
          // console.log(c)
          const course = this.generateCourse(c)
          course.forEach(month => {
            month.forEach(week => {
              week.forEach(day => {
                // console.log(day)
                if (day.data) {
                  day.data[0].courseGroup = c.title.substr(0, c.title.length-1)
                }
                const i = ret.findIndex(r => r.date == day.date)
                if (i > -1) {
                  if (day.type == 'holiday' || ret[i].type == 'holiday') {
                  // 如果有一个是放假，就继续放假

                    return
                  }

                  if (day.type == 'rest' && ret[i].type == 'class') {
                    // 还是上课
                    return
                  }
                  if (day.type == 'class' && ret[i].type == 'rest') {
                    // 还是上课 记录再ret里
                    ret[i].data = day.data
                    ret[i].type = 'class'
                    return
                  }
                  if (day.type == 'rest' && ret[i].type == 'rest') {
                    // 都休息
                    return
                  }
                  if (day.type == 'class' && ret[i].type == 'class') {
                    // 都休息
                    ret[i].data.push(day.data[0])
                  }
                  // if()
                } else {
                  // 没找到
                  ret.push(day)
                }
              })
            })
          })
        })

        const monthRet = []

        let month
        // let week = 1

        // ret.length = 6

        ret.forEach(day => {
          let mon = day.date.split('-')[1]
          if (mon !== month) {
            monthRet.push([[]])
            month = mon
          }

          if (day.dow === 1) {
            monthRet[monthRet.length - 1].push([])
          }
          const w = monthRet[monthRet.length - 1]
          w[w.length - 1].push(day)
          // week = day.dow
        })

        this.calcHourCount(monthRet)
        // merge后，修改数据
        this.selectedCourse = monthRet

        // const
      } else {
        const courseData = this.courses[index]
        const courses = this.generateCourse(courseData)
        // console.log(courses)
        this.selectedCourse = courses
      }

      // console.log(ret)
    },
    calcHourCount (monthRet) {
      const hourCount = {}
      monthRet.forEach(month => {
        // if()
     
        const key = month[1][0].date.slice(0, 7)
        hourCount[key] = hourCount[key] || {}
        month.forEach(week => {
          week.forEach(day => {
            if (day.data) {
              day.data.forEach(d => {
                hourCount[key][d.teacher] = hourCount[key][d.teacher] || 0
                hourCount[key][d.teacher] += 2
              })
            }
          })
        })
        // console.log(key)
      })
      this.hourCount = hourCount
      // console.log(hourCount)
    },
    generateWeek (courses) {
      // 添加dom喝dow
      courses = courses.map(course => {
        // console.log(course)
        const date = dayjs(course.date)
        course.dom = date.date()
        course.dow = date.day() === 0 ? 7 : date.day()
        return course
      })

      let ret = []
      let months = []
      let weeks = []
      // const start = courses[0]
      // for (let i = 0; i < courses.length; i++) {
      //   const course = courses[i];
      //   if()
      // }
      courses.forEach(course => {
        if (course.dow == 1) {
          months.push(weeks)
          weeks = []
        }
        if (course.dom == 1) {
          months.push(weeks)
          ret.push(months)
          weeks = []
          months = []
        }
        weeks.push(course)
      })
      if (weeks.length) {
        months.push(weeks)
      }
      if (months.length) {
        ret.push(months)
      }

      // ret = ret.map(v=>{
      //   return v
      // })
      return this.fixWeekPrefix(ret)
      // this.selectedCourse = ret
    },
    fixWeekPrefix (courses) {
      // 修正每周前缀
      if (courses[0][0].length === 0) {
        courses.shift()
      }
      return courses
    },
    fixMonthPrefix (startDate) {
      let date = dayjs(startDate)
      // console.log(date.day())
      // 月
      let i = date.date()
      return _.rangeRight(date.date() - 1).map(v => {
        return {
          type: 'rest',
          // xx:date.format('YYYY-MM-DD'),
          date: date.subtract(v + 1, 'days').format('YYYY-MM-DD')
        }
      })
    }
  },
  created () {
    this.selectCourseByIndex(0)
  }
}
</script>
